<template>
	<div>
		<vxe-toolbar export>
			<template v-slot:buttons>
				<vxe-button @click="loadList(10000)">1w条</vxe-button>
				<vxe-button @click="loadList(50000)">5w条</vxe-button>
				<vxe-button @click="loadList(100000)">10w条</vxe-button>
				<vxe-button @click="loadList(200000)">20w条</vxe-button>
				<vxe-button @click="$refs.xTable.setAllCheckboxRow(true)">所有选中</vxe-button>
				<vxe-button @click="$refs.xTable.clearCheckboxRow()">清除选中</vxe-button>
				<vxe-button @click="getSelectEvent">获取选中</vxe-button>
			</template>
		</vxe-toolbar>
		<vxe-table border resizable show-overflow show-header-overflow highlight-hover-row highlight-current-row
		 export-config ref="xTable" height="600" :loading="loading" :sort-config="{trigger: 'cell'}" :checkbox-config="{checkField: 'checked'}"  >
			<vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
			<vxe-table-column type="seq" width="100" fixed="left"></vxe-table-column>
			<vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>
			<vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>
			<vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>
			<vxe-table-column field="region" title="Region" width="200"></vxe-table-column>
			<vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
			<vxe-table-column field="address" title="Address" width="300"></vxe-table-column>
			<vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>
			<vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>
			<vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>
			<vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>
			<vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>
			<vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>
			<vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>
			<vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>
			<vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>
			<vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>
			<vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>
			<vxe-table-column field="age" title="Age" width="200" fixed="right"></vxe-table-column>
		</vxe-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false
			}
		},
		created() {
			this.loadList(600)
		},
		methods: {
			loadList(size) {
				this.loading = true
				setTimeout(() => {
					var list = []
					for (var index = 0; index < size; index++) {
						list.push({
							date: '2016-05-07',
							name: '王小虎',
							province: '上海',
							city: '普陀区',
							address: '上海市普陀区金沙江路 1518 弄',
							zip: 200333
						})
					}
					const xTable = this.$refs.xTable
					const startTime = Date.now()
					if (xTable) {
						this.$refs.xTable.reloadData(list).then(() => {
							this.$XModal.message({
								message: `渲染 ${size} 行，用时 ${Date.now() - startTime}毫秒`,
								status: 'info'
							})
							this.loading = false
						})
					}
				}, 300)
			},
			getSelectEvent() {
				let selectRecords = this.$refs.xTable.getCheckboxRecords()
				this.$XModal.alert(selectRecords.length)
			},
		}
	}
</script>

<style>
</style>
